<template>
  <div>
    <!-- 搜索查询 -->
    <van-sticky style="display: block; background-color: white">
      <div style="background-color: white">
        <van-row type="flex" style="padding-top: 1rem">
          <van-col span="20"
            ><van-search v-model="value" placeholder="请输入搜索关键词"
          /></van-col>
          <van-col span="4">
            <div v-if="value == ''">
              <van-icon name="cart-o" size="2rem" style="margin-top: 0.3rem" />
            </div>
            <div v-else>
              <router-link to="/searchresult"
                ><van-icon name="cart-o" size="2rem" style="margin-top: 0.3rem"
              /></router-link>
            </div>
          </van-col>
        </van-row>
        <!-- 导航标签 -->
        <van-row
          type="flex"
          style="padding-bottom: 1rem; border-bottom: 1px solid #e9e9e9"
        >
          <van-col span="6"><span>热门榜</span></van-col>
          <van-col span="6"><span>综合排序</span></van-col>
          <van-col span="6"><span>按价格</span></van-col>
          <van-col span="6"><span>按销量</span></van-col>
        </van-row>
      </div>
    </van-sticky>

    <van-row>
      <!-- 左侧导航 -->
      <div>
        <van-col span="4">
          <van-sidebar v-model="active" :items="items">
            <div style="background-color: #e9e9e9; height: 100vh">
              <van-sidebar-item :title="`${items[0].title}`" />
              <van-sidebar-item :title="`${items[1].title}`" />
            </div>
          </van-sidebar>
        </van-col>
        <van-col span="17" offset="2">
          <van-tree-select
            height="auto"
            :main-active-index.sync="active"
            style="width: auto"
          >
            <template #content>
              <div v-if="active === 0" style="padding-top: 1rem">
                <!-- 轮播图 -->
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                  style="border-radius: 0.5rem"
                  :show-indicators="false"
                >
                  <van-swipe-item
                    ><img
                      src="../assets/img/1241065260d10f23f531cfbca8ea482.jpg"
                      width="95%"
                      style="border-radius: 0.5rem"
                  /></van-swipe-item>
                  <van-swipe-item
                    ><img
                      src="../assets/img/1956aa5726f0ec0c805b9e0f2938e6d.jpg"
                      alt=""
                      width="95%"
                      style="border-radius: 0.5rem"
                  /></van-swipe-item>
                  <van-swipe-item
                    ><img
                      src="../assets/img/957c43fc50545194d1c95b7c2125b25.jpg"
                      alt=""
                      width="95%"
                      style="border-radius: 0.5rem"
                  /></van-swipe-item>
                </van-swipe>
                <!-- 导航列表 -->
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  style="padding-bottom: 3rem"
                >
                  <van-cell v-for="item in list" :key="item">
                    <div>
                      <van-card
                        num="2"
                        price="2.00"
                        desc="描述信息"
                        title="商品标题"
                        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                      >
                        <template #bottom>
                          <div>
                            <van-tag
                              plain
                              type="danger"
                              style="border-radius: 1rem"
                              >标签</van-tag
                            >&nbsp;
                            <van-tag
                              plain
                              type="danger"
                              style="border-radius: 1rem"
                              >标签</van-tag
                            >&nbsp;
                          </div>
                        </template>
                        <template #footer>
                          <van-button size="mini">按钮</van-button>
                        </template>
                      </van-card>
                    </div>
                  </van-cell>
                </van-list>
              </div>
              <div v-if="active === 1" style="padding-top: 1rem">
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                  style="border-radius: 0.5rem; width: 100%; height: 100%"
                  :show-indicators="false"
                >
                  <van-swipe-item>1</van-swipe-item>
                  <van-swipe-item>2</van-swipe-item>
                </van-swipe>
              </div>
            </template>
          </van-tree-select>
        </van-col>
      </div>
    </van-row>

     <!-- foot底部 -->
       
    <!-- <van-tabbar v-model="myfoot">
      <van-tabbar-item icon="home-o" name="home">首页</van-tabbar-item>      
      <van-tabbar-item icon="apps-o" name="classify">分类</van-tabbar-item>    
      <van-tabbar-item icon="shopping-cart-o" name="carts"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" name="mine">我的</van-tabbar-item>   
    </van-tabbar> -->
    <MyFoot></MyFoot>
  </div>
</template>

<script>
import MyFoot from '../components/MyFoot.vue'
export default {
  components: { MyFoot },
  data() {
    return {
      // myfoot: "classify",
      value: "",
      active: 0,
      items: [{ title: "分组 1" }, { title: "分组 2" }],
      list: [],
      loading: false,
      finished: false,
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.van-tree-select__nav {
  display: none;
}
.van-sidebar {
  position: fixed;
}
.van-sidebar-item,
.van-sidebar-item--select {
  background-color: transparent;
  border-bottom: 1px solid #bab9b9;
  height: 2rem;
  line-height: 0.2rem;
}
.van-sidebar-item--select::before {
  background-color: #e9e9e9;
}
.van-cell {
  padding: 0;
}
.van-card {
  padding: 15px 0;
}
</style>
